<template>
  <div class="login">
    <div class="wrappers">
      <div class="wrapper color color-blue"></div>
      <div class="wrapper color color-red"></div>
      <div class="wrapper color color-white">
        <LoginMain></LoginMain>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, ref } from 'vue';
import LoginMain from './components/loginMain.vue';
import { getTest } from '@/api/request';
export default defineComponent({
  name: 'Login-page',
  components: {
    LoginMain
  },
  setup() {
    const datas = ref();
    onBeforeMount(() => {
      // const account = {
      //   name: 'coderwhy',
      //   password: '123456'
      // };
      // getTest(account)
      //   .then((res) => {
      //     console.log('结果', res);
      //   })
      //   .catch((err) => {
      //     console.log('获取失败！' + err);
      //   });
    });
    return {
      datas,
      getTest
    };
  }
});
</script>
<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url('../../assets/img/background.webp');
  background-repeat: no-repeat;
  background-size: cover;
  .wrappers {
    position: relative;
  }
  .color {
    position: absolute;
    width: 100%;
    height: 100%;
    --tw-bg-opacity: 1;
  }
  .color-white {
    position: relative;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  }

  .color-blue {
    --tw-rotate: -6deg;
    transform: rotate(var(--tw-rotate));
    background-color: rgb(96 165 250 / var(--tw-bg-opacity));
  }

  .color-red {
    --tw-rotate: 6deg;
    transform: rotate(var(--tw-rotate));
    background-color: rgb(248 113 113 / var(--tw-bg-opacity));
  }
  .wrapper {
    padding: 16px 24px;
    border-radius: 1.5rem;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  ::v-deep .el-tabs--border-card {
    background: none;
    border: none;
  }
}
</style>
